<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>个人中心</title>
    <link rel="shortcut icon" href="../static/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="../static/css/base.css">
    <link rel="stylesheet" type="text/css" href="../static/css/my.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/js/base.js"></script>
    <script type="text/javascript">
             var ele;//保存图片对象
             var flag = 0; //图片是否修改
             var category_edit = 0; //是否为商品分类编辑或新增 0:为新增 1:为编辑
             var goods_edit = 0; //是否为商品详情编辑或新增 0:新增 1:编辑


             // 图片上传
            function imgPreview(fileDom,element){


                //判断是否支持FileReader
                if (window.FileReader) {
                    var reader = new FileReader();
                } else {
                    alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
                }
         
                //获取文件
                var file = fileDom.files[0];
                var imageType = /^image\//;
                //是否是图片
                if (!imageType.test(file.type)) {
                    alert("请选择图片！");
                    return;
                }
                if(file.size>5242880){
                    alert("请选择小于5MB的图片！")
                    return;
                }
                //读取完成
                reader.onload = function(e) {
                    //获取图片dom
                    ele = e;
                    var img = document.getElementById(element);
                    //图片路径设置为读取的图片
                    img.src = e.target.result;
         
                    flag = 1;
                };       
                reader.readAsDataURL(file);
          
            }
    </script>
</head>
<body>
	<header>
        <div class="container clearfix" id="top">
            <a href="/index"><img class="logo" src="../static/img/logo.png"></a>
            <a class="topbar-item" href="/index">首页</a>
            <a class="topbar-item" href="/category">小吃分类</a>
            <span th:if="${session.user} != null">
            <a class="topbar-item  active" href="/my" th:if="${session.user.username!='admin'}">个人中心</a>
            <a class="topbar-item" href="/admin" th:if="${session.user.username=='admin'}">个人中心</a>
            </span>
            <nav th:if="${session.user} == null">
                <a href="/register">注册</a>
                <span>|</span>
                <a href="/login">登录</a>
            </nav>
            <nav th:if="${session.user} != null">
                您好！<span th:text="${session.user.getUsername()}"></span>，<a href="/loginOut">退出</a>
            </nav>
        </div>
    </header>
    <a id="toTop" title="回到顶部"><img src="../static/img/scroll_top1.png"></a>

    <div class="main-box">
        <!-- 用户 -->
        <div class="customer">
            <div class="tabs">
                <ul>
                    <li class="myactive"><img src="../static/img/yonghu.png" alt="">我的资料</li>
                    <li><img src="../static/img/shoucang.png" alt="">我的收藏</li>
                    <li><img src="../static/img/shenqing.png" alt="">申请添加小吃</li>
                </ul>
            </div>
            <div class="clear"></div>
            <div class="tabs-content">
                <div class="account">
                    <div class="user-info-item">
                        <span class="ui-title">我的头像：</span>
                        <img id="user_preview" class="i-user-circle" th:src="${session.user.getImg()}"></img>
                        <input type="file" name="file" id="imgFile" onchange="imgPreview(this,'user_preview')">
                    </div>
                    <div class="user-info-item">
                        <span class="ui-title">手机号码：</span>
                        <input type="text" id="telphone" th:value="${session.user.getTelphone()}"  />
                    </div>
                    <div class="user-info-item">
                        <span class="ui-title" id="sex">性别：</span>
                        <label><input type="radio" value="男" name="sex" th:checked="${session.user.getSex() eq '男'}" />男</label>
                        <label><input type="radio" value="女" name="sex" th:checked="${session.user.getSex() eq '女'}" />女</label>
                    </div>
                    <div class="user-info-item">
                        <span class="ui-title">常住地：</span>
                        <input id="address" th:value="${session.user.getAddress()}" type="text">
                    </div>
                    <div class="user-info-item">
                        <span class="ui-title">新密码：</span>
                        <input id="newPwd" type="password">
                    </div>
                    <div class="user-info-item">
                        <span class="ui-title">确认新密码：</span>
                        <input id="renewPwd" type="password">
                    </div>
                    <button id="userinfo_save">保存修改</button>
                </div>
                <div class="myfavorite hide">
                    <div class="mytip" th:if="${favorites.size()} eq 0" >暂无收藏哦QAQ快去收藏小吃吧~</div>
                    <ul class="clearfix">
                        <li class="favorite-list fl" th:each="favorite:${favorites}">
                            <a th:href="'/detail?foodId='+${favorite.getId()}">
                                <img th:src="${favorite.getFoodImg()}" class="fl">
                                <div class="content">
                                    <div class="name">
                                        <span th:title="${favorite.getName()}" th:text="${favorite.getName()}">
                                        </span>
                                    </div>
                                    <div class="rank clearfix">
                                        <span class="star-ranking fl">
                                            <span class="star-score" th:attr="data-score=${favorite.getScore()}"></span>
                                        </span>
                                        <span class="score-num fl" th:if="${favorite.getScore()} ne '0'" th:text="${favorite.getScore()}+'分'"></span>
                                        <span class="score-num fl" th:if="${favorite.getScore()} eq '0'" th:text="暂无评分"></span>
                                    </div>
                                    <div  class="count">
                                        <span th:text="${favorite.getCommentCount()}+'点评'">
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="addxiaochi  hide">
                    <div class="form">
                        <div class="form-item">
                            小吃名称：<input id="name" maxlength="15" type="text" name="food_name"><i class="tip">(最长15个字符)</i>
                        </div>
                        <div class="form-item">
                            小吃分类：
                            <select id="xiaochi_category">
                                <option>请选择小吃分类</option>
                                <option th:each="category:${categorys}" th:text="${category.getCategoryName()}">gasga</option>
                            </select>
                        </div>
                        <div class="form-item">小吃图片：
                            <img id="xiaochi_preview" class="xiaochi_img" src="../static/img/demo.png"></img>
                            <input type="file" name="file" id="xiaochi_file" onchange="imgPreview(this,'xiaochi_preview')">
                        </div>
                        <div class="form-item">
                            小吃简介：
                            <textarea maxlength="300" class="xiaochi_intro" name="xiaochi_intro"></textarea><i class="tip"><span id="intro_count">0</span>/300</i>
                        </div>
                        <button id="add_submit">提交申请</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script type="text/javascript"  th:inline="javascript">
        /*<![CDATA[*/
        $(function(){
            $("textarea").on("input",function(){
                $("#intro_count")[0].innerHTML=$(this).val().length
            })

            $(".star-score").width(function () {
                return $(this).attr("data-score")/5*72;
            })

            //用户信息保存
            function confirmSave(obj){
                var message=confirm("确认保存？")
                if(message==true){
                    var formData = new FormData();
                    var telphone=$("#telphone").val();
                    formData.append("telphone",telphone);
                    var sex = $("input[name='sex']:checked").val();
                    formData.append("sex",sex);
                    var address=$("#address").val();
                    formData.append("address",address);
                    var newPwd=$("#newPwd").val()
                    var renewPwd=$("#renewPwd").val();
                    if(newPwd!=""){
                        if(newPwd==renewPwd){
                            console.log("Hhh")
                            formData.append("newPwd",newPwd);
                        }else {
                            alert("两次密码不一致！")
                            return;
                        }

                    }
                    if($("#imgFile")[0].value!=""){
                        var img = $('#imgFile')[0].files[0];
                        formData.append("img",img);
                    }

                    var username=/*[[${session.user.getUsername()}]]*/username;
                    var url =/*[[${session.user.getImg()}]]*/url;

                    formData.append("username",username);
                    formData.append("url",url);
                    $.ajax({
                        url:"/userUpdate",
                        type: 'POST',
                        cache: false,
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            if(data=="success"){
                                alert("保存成功！")
                            }
                        },
                        error: function(err) {
                            alert("保存失败！")
                        }
                    })
                }
            }
            $("#userinfo_save").click(function(){
                confirmSave(this);
            })

            // 增加小吃
            function confirmSubmit(obj){
                var message=confirm("确认保存？")
                if(message==true){
                    var name = $("#name").val();
                    var category = $("#xiaochi_category option:selected").text();
                    var img = $("#xiaochi_file")[0].files[0];
                    var intro=$(".xiaochi_intro").val();
                    if(name==""||category=="请选择小吃分类"||img==undefined||intro==""){
                        alert("请将信息填写完整！")
                        
                    }else{
                        var formData = new FormData();
                        formData.append("name",name);
                        formData.append("category",category);
                        formData.append("img",img);
                        formData.append("intro",intro);
                        formData.append("status","0");
                        // 插入数据库
                        $.ajax({
                            url:"/insertFood",
                            type: 'POST',
                            cache: false,
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(data) {
                                if(data=="success"){
                                    alert("提交申请成功！")
                                }
                            },
                            error: function(err) {
                                alert("提交申请失败！")
                            }
                        })
                    }

                }
            }
            $("#add_submit").click(function(){
                confirmSubmit(this)
            })


            $('.customer .tabs ul li').click(function(){
                $(this).addClass('myactive');
                $(this).siblings().removeClass('myactive');
                if($(this).index()==0){
                    $('.account').removeClass('hide');
                    $('.myfavorite,.addxiaochi').addClass('hide');
                }else if($(this).index()==1){
                    $('.myfavorite').removeClass('hide');
                    $('.account,.addxiaochi').addClass('hide');
                }else if($(this).index()==2){
                    $('.addxiaochi').removeClass('hide');
                    $('.account,.myfavorite').addClass('hide');
                }
            })
        })
        /*<![CDATA[*/
    </script>
</body>
</html>